<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head(~{::title})">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>书籍细节</title>
</head>

<body class="no-skin">

<!--导航部分-->
<div th:replace="_fragment :: nav"></div>

<div class="main-container" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.check('main-container', 'fixed')
        } catch (e) {
        }
    </script>

    <!--侧边栏-->
    <div th:replace="_fragment :: menu(3,3.1)"></div>

    <div class="main-content" >
        <div class="breadcrumbs" id="breadcrumbs">
            <script type="text/javascript">
                try {
                    ace.settings.check('breadcrumbs', 'fixed')
                } catch (e) {
                }
            </script>

            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a th:href="@{/admin/toIndex}">首页</a>
                </li>

                <li>
                    <a th:href="@{/admin/toBook}">书籍</a>
                </li>
                <li class="active">查看</li>
            </ul><!-- /.breadcrumb -->
        </div>

        <div class="page-content">

            <div class="page-content-area">

                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <h3 class="header smaller lighter blue">书籍信息</h3>
                        <div class="table-header lighter">
                            》
                        </div>

                        <table class="mdui-table mdui-table-hoverable">
                            <tbody>
                            <tr>
                                <td style="text-align: right">书名:</td>
                                <td name="name" id="name" th:text="${book.name}"></td>
                            </tr>
                            <tr>
                                <td style="text-align: right">作者:</td>
                                <td name="author" id="author" th:text="${book.author}"></td>
                            </tr>
                            <tr>
                                <td style="text-align: right">出版社:</td>
                                <td name="publishHouse" id="publishHouse" th:text="${book.publishHouse}"></td>
                            </tr>
                            <tr>
                                <td style="text-align: right">价格:</td>
                                <td name="price" id="price" th:text="|￥${book.priceStr}|"></td>
                            </tr>
                            <tr>
                                <td style="text-align: right">描述:</td>
                                <td><textarea th:text="${book.description}" name="description" id="description"
                                              disabled="disabled" style="height: 100px;width: 400px; border: none;resize: none; padding: 5px;color: black"></textarea></td>
                            </tr>
                            <tr>
                                <td style="text-align: right">库存:</td>
                                <td name="stock" id="stock" th:text="${book.stock}"></td>
                            </tr>
                            <tr>
                                <td style="text-align: right">是否推荐:</td>
                                <td name="recommend" id="recommend" th:text="${book.recommend == 0 ? '否' : '是'}"></td>
                            </tr>
                            <tr>
                                <td style="text-align: right">轮播图:</td>
                                <td>
                                    <ul class="ace-thumbnails clearfix">
                                        <li th:each="pic,stat:${book.pics}">
                                            <a th:href="@{${pic}}" title="" target="_blank" data-rel="colorbox" class="cboxElement">
                                                <img width="150" height="150" alt="150x150" th:src="@{${pic}}">
                                            </a>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right">书籍小图:</td>
                                <td>
                                    <ul class="ace-thumbnails clearfix">
                                        <li >
                                            <a th:href="@{${book.icon}}" title="" target="_blank" data-rel="colorbox" class="cboxElement">
                                                <img width="150" height="150" alt="150x150" th:src="@{${book.icon}}">
                                            </a>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.page-content-area -->
    </div><!-- /.page-content -->
</div><!-- /.main-content -->

<div th:replace="_fragment::footer"></div>

<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
    <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div><!-- /.main-container -->


<!--引入js	-->
<th:block th:replace="_fragment::script"></th:block>

<!-- inline scripts related to this page -->
<script type="text/javascript">
    //添加图片
    function add(){
        var str = $("#id-input-file-2").val();
        var arr=str.split('\\');//注split可以用字符或字符串分割
        var my=arr[arr.length-1];//这就是要取得的图片名称

        $("#ace-file-container").attr("data-title","Change");
        $("#ace-file-name").attr("data-title",my);
        $("#ace-file-container").addClass("selected");
        //isFile();
    }

    //清空input的file
    function remove() {
        $("#removeInput").html('<input type="file" id="id-input-file-2" onchange="add()">');
        $("#ace-file-container").attr("data-title","Choose");
        $("#ace-file-name").attr("data-title","请选择图片");
        $("#ace-file-container").removeClass("selected");
        //isFile();
    }


    function isUserName() {
        var userName = $("#loginMyUser").val();
        if(userName == null || userName == ""){
            $("#errorMsg-userName").html("不能为空");
            return false;
        }else{
            $("#errorMsg-userName").html("");
            return true;
        }
    }

    function isPassword() {
        var password = $("#password").val();
        if(password == null || password == ""){
            $("#errorMsg-password").html("不能为空");
            return false;
        }else{
            $("#errorMsg-password").html("");
            return true;
        }
    }




    function isPassword2() {
        var p1 = $("#password").val();
        var p2 = $("#password2").val();
        if(p2 == null || p2 == ""){
            $("#errorMsg-password2").html("不能为空");
            return false;
        }else{
            if(p1 != p2){
                $("#errorMsg-password2").html("两次输入的密码不同");
                return false;
            }else{
                $("#errorMsg-password2").html("");
                return true;
            }
        }
    }


    function isPhone() {
        var phone = $("#phone").val();
        if(phone == null || phone == ""){
            $("#errorMsg-phone").html("不能为空");
            return false;
        }else{
            if(!(/^1[3456789]\d{9}$/.test(phone))){
                $("#errorMsg-phone").html("手机号码格式错误");
                return false;
            }else{
                $("#errorMsg-phone").html("");
                return true;
            }
        }
    }


    function isAddress() {
        var address = $("#address").val();
        if(address == null || address == ""){
            $("#errorMsg-address").html("不能为空");
            return false;
        }else{
            $("#errorMsg-address").html("");
            return true;
        }
    }

    function isFile() {
        var file = $("#id-input-file-2").val();
        if(file == null || file == ""){
            $("#errorMsg-file").html("不能为空");
            return false;
        }else{
            $("#errorMsg-file").html("");
            return true;
        }
    }



    function isEmail() {
        var email = $("#email").val();
        var reg = /^[a-z0-9]+([._\\\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
        if(email == null || email == ""){
            $("#errorMsg-email").html("不能为空");
            return false;
        }else{
            if(!reg.test(email)){
                $("#errorMsg-email").html("邮箱格式错误");
                return false;
            }else{
                $("#errorMsg-email").html("");
                return true;
            }
        }
    }

    function subForm() {
        var isTrue = isUserName() && isPassword() && isPassword2() && isPhone() && isAddress()  && isEmail();
        if(isTrue){
            $("#validation-form").submit();
        }
    }



</script>
</body>
</html>
